/**
 * The currently selected site block
 * at the top of the sidebar in My Sites
 */

.current-site.card {
	margin: 0;
	padding: 0;
	box-shadow: none;
	border-bottom: 1px solid darken( $sidebar-bg-color, 5% );

	&.is-loading {
		.site-icon {
			animation: pulse-light 0.8s ease-in-out infinite;
		}

		.site__title {
			color: darken( $gray, 20% );
			line-height: 35px;
		}

		.current-site__switch-sites {
			cursor: default;

			&::before {
				visibility: hidden;
			}
		}
	}
}

.current-site .site {
	transition: opacity 0.15s ease-in-out;

	.site__info {
		animation: appear .3s ease-in-out;
	}

	.focus-sites & {
		opacity: 0.2;
		pointer-events: none;
	}
}

.current-site__switch-sites {
	background: $sidebar-bg-color;
	border-bottom: 1px solid darken( $sidebar-bg-color, 5% );
	display: block;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;

	.button {
		text-align: left;
		padding: 16px;
		width: 100%;
	}

	@include breakpoint( "<660px" ) {
		background-color: $gray-light;
	}

	&:hover {
		background-color: lighten( $sidebar-bg-color, 3% );

		.button.is-borderless:hover,
		.button.is-borderless:focus {
			color: $sidebar-text-color;
		}
	}
}

.current-site .notice {
	margin: 0 8px 8px;
}

.current-site .notice.is-compact {
	display: flex;
	margin: 0;
	padding: 0 0 0 4px;
	border-radius: 0;

	@include breakpoint( "<660px" ) {
		padding: 0 24px;
	}

	.notice__text {
		width: 100%;
		display: inline;
		line-height: 1.3;
	}

	.notice__action {
		margin-left: auto;
	}
}
